<script setup lang="ts">
import {onMounted, ref, watch} from 'vue'
import {useUserInfoStore} from "@/stores/user_info";
import {getFileSize} from "@/utils/textUtils";
import {updateUserAvatar} from "@/api/user";

const userInfoStore = useUserInfoStore()
const cloudSize = ref("")
cloudSize.value = getFileSize(userInfoStore.userInfo.cloudSize)
const surplusCloudFileSize = ref("")

surplusCloudFileSize.value = getFileSize(userInfoStore.userInfo.cloudSize-userInfoStore.userInfo.surplusCloudSize)

const customColor = ref('#409eff')

watch(() => userInfoStore.userInfo, (newVal) => {

  surplusCloudFileSize.value = getFileSize(newVal.cloudSize-newVal.surplusCloudSize)

  cloudSize.value = getFileSize(newVal.cloudSize)

})
let avatar = ref()

let updateAvatar = () => {
  avatar.value.click()
}

const fileListener = (e: any) => {
  console.log(e)
  let file = e.target.files[0]
  let formData = new FormData()
  formData.append("file", file)
  updateUserAvatar(formData).then((res: any) => {
    userInfoStore.selectUserInfo()
  })
}

</script>

<template>
  <input type="file" id="avatar" ref="avatar" style="display: none" @change="fileListener"/>
  <div class="la-avatar">
    <div class="avatar-box" @click="updateAvatar">
      <el-avatar v-if="userInfoStore.userInfo.avatar" :size="100" :src="userInfoStore.userInfo.avatar"/>
      <img style="width: 100px;height: 100px;border-radius: 50px" src="@/assets/xjm.png" v-else />
    </div>
    <div class="info-box">
      <h4>{{ userInfoStore.userInfo.nickname }}</h4>
      <el-progress style="margin: 15px 0" :stroke-width="8" :width="90"
                   :percentage="(parseInt(userInfoStore.userInfo.cloudSize)-parseInt(userInfoStore.userInfo.surplusCloudSize))/parseInt(userInfoStore.userInfo.cloudSize)*100"
                   :show-text="false"
                   :color="customColor"/>
      <p style="font-size: 15px;white-space: nowrap">
        {{ cloudSize }}&nbsp;/&nbsp;{{ surplusCloudFileSize }}
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.la-avatar {
  display: flex;
  align-items: center;

  .avatar-box {
    margin-right: 20px;
  }

  .info-box {
    max-width: 190px;
    padding-right: 15px;
    flex: 1;

    h4 {
      max-width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

  }

}
</style>